<template>
  <div>
    <!--头部导航
    插槽：是往组件里某个占位的位置，传入我们自己的标签替换进去显示
    使用：组件标签夹着的中间，用template包裹要传入的标签
    具名插槽：V-s1ot:名字，指定传入到某个插槽名字占位符的地方
    v-s1ot:名字可以简写成#名字
    -->
    <van-nav-bar fixed>
      <template #left>
        <img src="@/assets/logo.png" class="logo" />
      </template>
      <template #right>
        <!-- icon组件没有单独控制字体大小或者颜色的样式变量  所以在标签中直接写行内样式  要注意的是，行内样式需要自行计算rem   postcss插件只能自动转换style样式中的px -->
        <van-icon name="search" color="white" size="0.48rem" @click="$router.push('/search')"/>
      </template>
    </van-nav-bar>

    <div class="tabs_content">
      <!--sticky 粘滞布局 需要设置距顶部的距离（ offset-top="1.226667rem"）  固定在指定的位置  -->
      <van-tabs
        v-model="active"
        sticky
        animated
        color="#007bff"
        offset-top="1.226667rem"
      >
        <van-tab v-for="obj in userChannelList" :key="obj.id" :title="obj.name">
          <!-- 给子组件传递频道id -->
          <article-list :cid="obj.id"></article-list>
        </van-tab>
      </van-tabs>

      <!-- 编辑频道图标 -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="show=true"/>
    </div>

    <!-- 编辑频道-弹出层 -->
    <van-popup v-model="show" class="edit_wrap">
      <!--
        .sync语法糖：（双向数据绑定） 在同一个标签上可以绑定多个  v-model 只能绑定一次
        运行时：代码会被转换成这样
        userChannelList="userChannelList"(>
        @update:userChannelList="val =>userChannelList=val"
       -->
      <channel-edit v-model="show" :userChannelList.sync="userChannelList"  @changeChannel='changeChannelFn' ></channel-edit>
    </van-popup>
  </div>
</template>

<script>
import { getUsersChannelListAPI } from '@/api'
// 导入ArticleList组件
import ArticleList from '@/views/Home/ArticleList.vue'
import ChannelEdit from '@/views/Home/ChannelEdit'
export default {
  name: 'HM-Home',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      userChannelList: [], // 用户"已选"频道列表
      show: false,
      changeScrollT: {} // 保存每个频道的滚动位置
    }
  },
  created () {
    this.getUserChannelListFn()
  },
  methods: {
    // 获取-用户已选的频道列表
    async getUserChannelListFn () {
      const res = await getUsersChannelListAPI()
      console.log(res)
      // this.userChannelList = res.data.data.channels
      const {
        data: {
          data: { channels }
        }
      } = res
      this.userChannelList = channels
    },
    changeChannelFn (channelObj) {
      const index = this.userChannelList.findIndex(item => item.id === channelObj.id)
      this.active = index
      // tab切换后，设置滚动条位置
      // tab切换时，这个组件内部，会把切走的容器height设置为0,滚动条因为没有高度回到了顶部
      // 切回来的一瞬间，没有高度，滚动事件从底下上来也被触发了，所以才把数据里设置为0
      // 切换来的一瞬间(DOM还未更显完毕)，高度为0，你设置滚动位置也无用

      // 等 DOM 更新完毕之后，根据记录的"滚动条位置"，调用方法进行滚动
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.changeScrollT[this.active]
        document.body.scrollTop = this.changeScrollT[this.active]
      })
    },
    // 记录页面滚动
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop || document.body.scrollTop
      // 同时保存当前频道的滚动位置
      this.changeScrollT[this.active] = document.documentElement.scrollTop || document.body.scrollTop
    }

  },
  // 页面激活时，监听页面滚动事件
  activated () {
    // window和document, 监听网页滚动的事件
    // html标签获取scrollTop,滚动的距离，和设置滚动的位置
    // 立刻设置，滚动条位置
    window.addEventListener('scroll', this.scrollFn)
    document.documentElement.scrollTop = this.$route.meta.scrollT
    document.body.scrollTop = this.$route.meta.scrollT
  },
  // 页面失活时，清除监听事件
  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  }
}
</script>
<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
// tab栏内容部分, 也要给tab导航定位留出距离   因为tab栏设置了fixed布局，会脱离文档流，下面的内容会移动到顶部，所以设置一个上内边距流出tab栏的位置
.tabs_content {
  padding-top: 48px;
}
// 设置 tabs 容器的样式
::v-deep .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.edit_wrap {
  width: 100%;
  height: 100%;
}
</style>
